<template>
<div id="inputbox">
  <el-form :model="dataform" :rules="rules" ref="form" class="demo-ruleForm">
    <el-form-item prop="phone" >
      <el-input v-model="dataform.phone" placeholder="请输入用户名(电话号码)" ></el-input>
    </el-form-item>
    <el-form-item  prop="password" >
      <el-input placeholder="请输入密码" v-model="dataform.password" show-password ></el-input>
    </el-form-item>
    <el-form-item>
      <div class="compon">

        <el-radio v-model="dataform.identity" label="学生">学生</el-radio>
        <el-radio v-model="dataform.identity" label="教师">教师</el-radio>

      </div>
      <br>
      <div>
        <el-button v-on:click="logconfirm('dataform')">登录</el-button>
        <el-button v-on:click="register">注册</el-button>
      </div>
    </el-form-item>
  </el-form>



</div>
</template>

<script>






export default {
  name: "LoginPage",
  data() {
    return {
      rules:{
        phone: [
          {required:true,message:'请输入手机号',trigger:'blur'},
          { validator:function(rule,value,callback){
              if(/^1[34578]\d{9}$/.test(value) === false){
                callback(new Error("请输入正确的手机号"));
              }else{
                callback();
              }
            }, trigger: 'blur'
          },
        ],
        password: [
          { type: 'string',message: '请输入不包含非法字符的密码！', trigger: 'blur',
            transform(value) {
              if (value && value.indexOf(' ') === -1&& value.indexOf('*') === -1&& value.indexOf('/') === -1&& value.indexOf('$') === -1&& value.indexOf('￥') === -1&& value.indexOf('%') === -1&& value.indexOf('\'') === -1) {
                return value
              } else {
                return false
              }
            }
          },
          {
            validator: (rule, value, callback) => {
              if (value.length > 18 || value.length < 6) {
                callback(new Error('长度必须为6~18个字符'))
              } else {
                var reg = new RegExp("[`~!@#$^&*()=|{}':',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
                if (reg.test(value)) {
                  callback(new Error('请输入不包含非法字符的密码'))
                } else {
                  callback()
                }
              }
            },
            trigger: 'blur'
          }
        ],
      },
      Userdata:[],
      dataform:{
        name: '',
        sex: '',
        phone:'',
        email:'',
        identity:'学生',
        password:'',
        }
    }
  },
  methods:{
   register(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          window.open("/Register",'_self');
        } else {
          console.log('错误提交！');
          return false;
        }
      });
    },
    logconfirm(){
      request.post("/api/user/login",this.dataform).then(
          res=>{
            console.log(res)
            if(res.code==="-2"){
              this.$message({
                message: '请选择身份！',
                type: 'error'
              });
            }else{
              if(res.code==="-1"){
                this.$message({
                  message: '用户名或密码错误',
                  type: 'error'
                });
              }else{
                let type
                this.$message({
                  message: '登陆成功',
                  type: 'success'
                });
                sessionStorage.setItem("user",type=JSON.stringify(res.data))// 缓存用户信息
                request.post("api/log",sessionStorage.getItem("user")).then(res=>console.log(res))
                this.$router.push("/Main")  //登录成功之后进行页面的跳转，跳转到主页
              }
            }
          }
      )
  },
 }
}
</script>

<style scoped>
 #inputbox{
   margin: 50px;
   padding-left: 30%;
   padding-right: 30%;
 }
 .compon{
   box-sizing: border-box;
   margin: 20px;
 }
 #inputbox el-input{
   padding-bottom: 10px;
 }
</style>
